<template>
  <div class="my-tinymce">
    <Editor v-model="contentValue" :init="myInit" />
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from 'vue'
import axios from 'axios'
// 引入tinymce编辑器
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入则不显示编辑器
// 导入配置文件
// import './js/importTinymce'

export default {
  name: 'myEditor',
  components: {
    Editor
  },
  props: {
    // 绑定文本值
    modelValue: {
      type: String,
      default: ''
    },
    // placeholder
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    // 默认样式
    style: {
      type: Object,
      default: () => {
        return { width: '100%', heigth: '400' }
      }
    },
    // 图片上传服务器地址
    imgUploadUrl: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    const state = reactive({
      myInit: customer(init), // 初始化
      contentValue: props.modelValue, // 绑定文本
      timeout: null,
    })
    let init =reactive({
      language: props.language, //语言类型

      skin_url: "skins/ui/oxide", //皮肤：浅色
      // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
      content_css: "skins/ui/oxide/content.min.css",
      emoticons_database_url: 'plugins/emoticons/emojis.min.js', //表情路径引入
      toolbar_mode: props.toolbarMode, // 设置工具栏更多工具 显示模式{false:全部展示,floating:悬浮显示,sliding:滑动显示}
      plugins: props.plugins, //插件配置
      toolbar: props.toolbar, //工具栏配置，设为false则隐藏

      //menubar: 'file edit',  //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”

      fontsize_formats: props.fontSizeList,
      font_formats: props.fontTypeList,
      lineheight_formats: props.LineHightList, //行高配置，也可配置成"12px 14px 16px 20px"这种形式

      height: props.height, //注：引入autoresize插件时，此属性失效
      placeholder: props.placeholder,
      branding: false, //tiny技术支持信息是否显示
      resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
      statusbar: props.statusbar,  //最下方的元素路径和字数统计那一栏是否显示
      elementpath: false, //元素路径是否显示

      content_style: props.contentStyle, //直接自定义可编辑区域的css样式
      //content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入

      // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
      // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
      paste_data_images: true, //图片是否可粘贴
    })
    onMounted(() => {
      tinymce.init({})
    })

    // 侦听文本变化并传给外界
    watch(() => state.contentValue, (n) => {
      debounce(() => {
        emit('update:modelValue', state.contentValue)
      })
    })
    // 侦听默认值 外界第一次传进来一个 v-model 就赋值给 contentValue
    watch(() => props.modelValue, (n) => {
      if (n && n !== state.contentValue) {
        state.contentValue = n
      }
    })

    function debounce (fn, wait = 400)  {
      // console.log('进到了防抖', wait)
      if (state.timeout !== null) {
        clearTimeout(state.timeout)
      }
      state.timeout = setTimeout(fn, wait)
    }

    // 参数自定义初始化
    function customer (init) {
      // 允许外界传进来高度和placeholder
      init.height = props.style.heigth
      init.placeholder = props.placeholder

      // 粘贴图片 自动处理 base64
      init.urlconverter_callback = (url, node, onSave, name) => {
        if (node === 'img' && url.startsWith('blob:')) {
          tinymce.activeEditor && tinymce.activeEditor.uploadImages()
        }
        return url
      }
      // 图片上传
      init.images_upload_handler = (blobInfo, success, failure) => {
        imgUploadFn(blobInfo, success, failure)
      }
      return init
    }

    function imgUploadFn (blobInfo, success, failure) {
      // 可以限制图片大小
      // if (blobInfo.blob().size / 1024 / 1024 > 2) {
      //   failure('上传失败，图片大小请控制在 2M 以内')
      // } else {}
      const params = new FormData()
      params.append('file', blobInfo.blob())
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      // 图片上传
      axios.post(props.imgUploadUrl, params, config).then(res => {
        if (res.data.code == 0) {
          success(res.data.data.url) // 上传成功，在成功函数里填入图片路径
          // console.log('[文件上传]', res.data)
        } else {
          failure('上传失败')
        }
      }).catch(() => {
        failure('上传出错，服务器开小差了呢')
      })
    }

    return ({
      ...toRefs(state),
      customer,
      debounce,
      init
    })
  }
}
</script>
